<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户来源统计</title>
    <script type="text/javascript" src="/crm/js/vue.js"></script>
    <script type="text/javascript" src="/crm/js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--引入echarts-->
    <script src="/crm/js/echarsTest.js"></script>
    <script src="../static/js/echarsTest.js"></script>
    <!--引入jquery-->
    <script src="/crm/js/jquery-3.3.1.min.js"></script>
    <style>
        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
    </style>
</head>
<body>
<div id="divAll">
    <table>
        <tr>
            <td>
                <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link">
                        {{style}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="year">按年查询</el-dropdown-item>
                        <el-dropdown-item command="month">按月查询</el-dropdown-item>
                        <el-dropdown-item command="week">按周查询</el-dropdown-item>
                        <el-dropdown-item command="day">按日查询</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </td>
            <td>
                <div class="block">
                    <el-date-picker
                            :editable="editable"
                            :format="format"
                            :type="type"
                            v-model="beginTime"
                            placeholder="选择开始时间"
                            :picker-options="pickerBeginDateBefore"  @change="changeTime">
                    </el-date-picker>
                    <span class="demonstration">{{message}}</span>
                </div>
            </td>
            <td>
                ——
            </td>
            <td>
                <div class="block">
                    <el-date-picker
                            :editable="editable"
                            :format="format"
                            :type="type"
                            v-model="endTime"
                            placeholder="选择结束时间"
                            :picker-options="pickerBeginDateAfter">
                    </el-date-picker>
                    <span class="demonstration">{{message}}</span>
                </div>
            </td>
            <td>
                <el-button type="primary" @click="search" icon="el-icon-search">查看</el-button>
            </td>
        </tr>
    </table>
    <div>
        <div id="customerResource" style="float:left;width: 600px;height:600px;"></div>
        <div id="customerCount" style="margin-left:30px;float:left;width:980px;height:600px;"></div>
    </div>
</div>

<!--<div id="customerResource" style="width: 600px;height:400px;"></div>-->
<script>
    var vm=new Vue({
        el:'#divAll',
        data:{
            editable:false,
            queryStyle:'year',
            style:"选择搜索单位",
            beginTime:'',
            endTime:'',
            message:'年',
            format:'',
            type:"year",
            pickerBeginDateBefore: {
                disabledDate: (time) => {
                    let beginDateVal = vm.endTime;
                    if (beginDateVal) {
                        return time.getTime() > beginDateVal;
                    }
                }
            },
            pickerBeginDateAfter: {
                disabledDate: (time) => {
                    let beginDateVal =vm.beginTime;
                    if (beginDateVal) {
                        return time.getTime() < beginDateVal;
                    }
                }
            },
        },
        methods:{
            handleCommand(command) {
                if(command=='year'){
                    vm.queryStyle="year";
                    vm.type="year";
                    vm.format="yyyy";
                    vm.message="年";
                    vm.style="按年查询"
                }
                if(command=='month'){
                    vm.queryStyle="month";
                    vm.type="month";
                    vm.format="yyyy-MM";
                    vm.message="月";
                    vm.style="按月查询"
                }
                if(command=='week'){
                    vm.queryStyle="week";
                    vm.type="week";
                    vm.format="yyyy 第 WW 周";
                    vm.message="周";
                    vm.style="按周查询"
                }
                if(command=='day'){
                    vm.queryStyle="day";
                    vm.type="date";
                    vm.message="日";
                    vm.format="yyyy-MM-dd";
                    vm.style="按天查询"
                }
            },
            changeTime(date){
                vm.endTime="";
                this.pickerBeginDateAfter={
                    disabledDate(time) {
                        //开始时间-结束时间
                        return (time.getTime() < new Date(date).getTime());
                    }
                }
            },
            search:function () {
                // var echartsPie = echarts.init(document.getElementById('customerResource'));
                if(vm.beginTime==null||vm.beginTime==''){
                    this.$message("请选择起始时间");
                }else if(vm.endTime==null||vm.endTime==''){
                    this.$message("请选择结束时间");
                // else if((vm.queryStyle!="year")&&(vm.queryStyle!="day")&&(vm.beginTime.getFullYear()!=vm.endTime.getFullYear())){
                //         this.$message("请选择在相同年份查找");
                //     }
                }else{
                  // this.$message(vm.beginTime+"---"+vm.endTime);
                    var params =  new URLSearchParams();
                    params.append('beginTime',vm.beginTime);
                    params.append('endTime',vm.endTime);
                    params.append('queryStyle',vm.queryStyle);
                    axios.post("customerResourceCount",params)
                        .then(function (value) {
                            test(value);
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                    axios.post("customerCount",params)
                        .then(function (value) {
                            dataManager(value);
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            },
        }
    });
/*****************************饼图数据填充*****************************/
function test(value) {
    var echartsPie = echarts.init(document.getElementById('customerResource'));
        var servicedata=[];
        for(var i=0;i<value.data.name.length;i++){
            var obj={};
            obj.name=value.data.name[i];
            obj.value=value.data.count[i];
            servicedata[i]=obj;
        }
        echartsPie.setOption({
            title : {
                text: '客户来源统计',
                subtext: '饼图',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{b} <br/>{c} : {d} %"      //a 系列名称，b 数据项名称，c 数值，d 百分比
            },
            legend: {
                orient : 'vertical',
                x : 'left',
                data:value.data.name
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            series : [
                {
                    name:'客户来源',
                    type:'pie',
                    radius : '55%',//饼图的半径大小
                    center: ['50%', '60%'],//饼图的位置
                    data:servicedata
                }
            ]
     //   })
    })
    .catch(function (error) {
        console.log(error);
    });
}


   // 绘制客户来源统计饼图
    axios.post("customerResourceCount")
        .then(function (value) {
            test(value);

        })
        .catch(function (error) {

            console.log(error);
        });

    //折线图样式显示效果
    function showChart(title, data, max) {
        var myChart = echarts.init(document.getElementById('customerCount'));
        var option = {
            title : {
                text: '客户量统计',
                subtext: '折线图',
                x:'center'
            },
            legend : {
                //data : [ '客户量' ]
                orient : 'vertical',
                x : 'right',
                data:title
            },
            xAxis : {
                data : title
            },
            yAxis : {
                splitLine : {//分割线
                    show : false
                }
            },
            toolbox: {//echarts工具栏
                showTitle:true,
                show : true,
                x: '100',   // 水平安放位置，默认为全图右对齐，可选
                y: '10',   // 垂直安放位置，默认为全图顶端，可选
                feature: {
                    dataView: { //数据视图
                        show: true
                    },
                    restore: { //重置
                        show: true
                    },
                    dataZoom: { //数据缩放视图
                        show: true
                    },
                    saveAsImage: {//保存图片
                        show: true
                    },
                    magicType: {//动态类型切换
                        type: ['bar', 'line']
                    }
                }
            },
            tooltip: { //弹窗组件
                show: true
            },
            calculable : true,
            /*视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素。视觉元素可
            以是：symbol: 图元的图形类别。symbolSize: 图元的大小。color: 图元的颜色。*/
            visualMap : {
                show:true,   //是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在
                top : '5',//组件离容器上侧的距离
                right : '5',//组件离容器右侧的距离,
                precision:1,//设置小数精度，默认0没有小数
                hoverLink:true,  //鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮
                pieces : [ {
                    gt : 0,
                    lte : max * 0.1,
                    color : '#94FFFF'
                }, {
                    gt : max * 0.1,
                    lte : max * 0.3,
                    color : '#9468FF'
                }, {
                    gt : max * 0.3,
                    lte : max * 0.5,
                    color : '#00FF00'
                }, {
                    gt : max * 0.5,
                    lte : max * 0.7,
                    color : '#FF00FF'
                }, {
                    gt : max * 0.7,
                    lte : max * 0.9,
                    color : '#2F4100'
                }, {
                    gt : max * 0.9,
                    color : '#7e0023'
                } ],
                outOfRange : {
                    color : '#FF8D8B'
                }
            },
            series : [ {
                name : '客户量',
                type : 'line',
                data : data,
                markLine : {
                    silent : true,
                    data : [ {
                        yAxis : max * 0.1
                    }, {
                        yAxis : max * 0.3
                    }, {
                        yAxis : max * 0.5
                    }, {
                        yAxis : max * 0.7
                    }, {
                        yAxis : max * 0.9
                    } ]
                },
                itemStyle : {
                    normal : {
                        label : {
                            show : true
                        }
                    }
                },
            } ]
        };
        myChart.setOption(option);
    }


    //折线图统计客户量数据处理
    function dataManager(value){
        var title = [];
        var data = [];
        var max = 0;
        var wei = 0.1;
        console.log(value.data);
        for(var i=0;i<value.data.name.length;i++){
            console.log(value.data.name[i]);
            title[i] = value.data.name[i];
            data[i] = value.data.count[i];
            if (value.data.count[i] > max) {
                max = value.data.count[i];
            }
        }
        var max2 = max;
        while (max2 > 1) {
            max2 = max2 / 10;
            wei = wei * 10;
        }
        max = parseInt(max / wei) * wei+wei;
        showChart(title, data, max);
    }
    // 绘制客户量统计折线图
    axios.post("customerCount")
        .then(function (value) {
              dataManager(value);
        })
        .catch(function (error) {
            console.log(error);
        })
</script>
</body>
</html>